<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<div class="row">
    <div class="col-md-12">

        <form  class="form-horizontal" id="addForm" >
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">选择停车场</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <select class="form-control" required id="parkingId" name="parkingId" onchange="getZone()">
                                            <option value="">请选择所属停车场</option>
                                            <c:forEach items="${parkingList}" var="item">
                                                <option value="${item.id}">${item.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <span class="help-block">请选择停车场</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">车位编号</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <input type="text" class="form-control" name="number" id="number">
                                    </div>
                                    <span class="help-block">请输入车位编号</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">所属分区</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <select class="form-control" name="zoneId" id="zoneId" onchange="xiu()">
                                            <option value="">请选择分区</option>
                                        </select>
                                    </div>
                                    <span class="help-block">请选择分区</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">车位属性</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <select class="form-control" name="switchLock" onchange="choose(this.options[this.options.selectedIndex].value)">
                                            <option value="1">智能车位</option>
                                            <option value="2">普通车位</option>
                                        </select>
                                    </div>
                                    <span class="help-block">请选择车位属性</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" id="chooseLockId">
                            <div class="form-group">
                                <label class="col-md-3 control-label">地锁编号</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <select class="form-control" name="lockId" id="lockId">
                                            <option value="">请选择地锁</option>
                                        </select>
                                    </div>
                                    <span class="help-block">请选择地锁</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">车位状态</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <select class="form-control" name="switchStatus">
                                            <option value="1">未预约</option>
                                            <option value="0">已预约</option>
                                            <option value="2">使用中</option>
                                            <option value="3">未使用</option>
                                        </select>
                                    </div>
                                    <span class="help-block">请选择车位状态</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">备注</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <input type="text" class="form-control" name="intro" id="intro">
                                    </div>
                                    <span class="help-block">请输入备注信息</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">车位位置</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <button id="checkParklot" class="btn btn-success" type="button"  onclick="selectParklot();"  >
                                            <i class="fa fa-arrow-left fa-fw"></i>  选择车位位置
                                        </button>
                                        <input type="hidden" id="tu" value="">
                                        <%--<input type="text" id="tuId" value="">--%>
                                    </div>
                                    <span class="help-block">请选择车位位置</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">x坐标</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <input type="text" class="form-control" name="zonex" id="zonex">
                                    </div>
                                    <span class="help-block">x坐标</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" id="div-image">
                            <div class="form-group">
                                <label class="col-md-3 control-label">y坐标</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <input type="text" class="form-control" name="zoney" id="zoney">
                                    </div>
                                    <span class="help-block">y坐标</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="panel-footer">
                    <button class="btn btn-default" onclick="clearAll()">清空</button>
                    <input type="button"class="btn btn-primary pull-right" onclick="save()" value="保存">
                </div>
            </div>
        </form>
    </div>
</div>
<script>

    /**
     * @Author yanzengbao
     * @Description: 根据停车场id查询分区和地锁
     * @Date:2017/11/9 10:19
     */
    function getZone() {
        $("#zoneId").find("option").remove();
        $("#lockId").find("option").remove();
        var parkingId=$('#parkingId option:selected').val();
        console.log(parkingId);
        if(parkingId != undefined && parkingId != ""){
            $.ajax({
                type:"POST",
                url:"/car/parkingZone/selectByParkingId",
                data:{"parkingId":parkingId},
                dataType:"json",
                success:function (data) {
                    $("#zoneId").append('<option value="">' + "请选择分区" + '</option>')
                    for(var i=0; i<data.length; i++){
                        $("#zoneId").append('<option value="' + data[i].id + '">' + data[i].name + '</option>')
                    };
                }
            });
            $.ajax({
                type:"POST",
                url:"/car/lock/selectByParkingId",
                data:{"parkingId":parkingId},
                dataType:"json",
                success:function (data) {
                    console.log(data.length);
                    for(var i=0; i<data.length; i++){
                        $("#lockId").append('<option value="' + data[i].id + '">' + data[i].number + '</option>')
                    };
                }
            });
        }
    }


    function xiu(){
        //首先获得下拉框的节点对象；
        var zoneId = $("#zoneId").val();
        console.log("分区id:"+zoneId);
        if(zoneId!= null && zoneId!="") {
            document.getElementById("div-image").style.display = "block";
            $.ajax({
                type:"POST",
                url:"/car/parkingZone/selectZoneImg",
                data:{"id":zoneId},
                dataType:"json",
                success:function (data) {
                    console.log("打印图片url:"+data.zoneImg);
                    $("#tu").attr('value', data.zoneImg);
                    $("#tuId").attr('value',data.zoneImgId)
                }
            });
        }
    }

    /*判断有无地锁控制是否绑定地锁*/
    function choose(value) {
        if (value == '1') {
            $("#chooseLockId").show();
        } else if (value == '2') {
            $("#chooseLockId").hide();
            $("#lockId").find("option").remove();

        }
    }



    /*保存*/
    function save() {
        var param = $("#addForm").serialize();
        console.log(param);
        var number = $("#number").val();
        if (number == null || number == ''){
            layer.msg("请填写停车位编号");
            return;
        }
        if($("#addForm").validate()){
            $.ajax({
                type: 'post',
                dataType: 'json',
                data: param ,
                async: true,
                url: '/car/parkinglot/save',
                success: function (data) {
                    if (data.success){
                        layer.msg(data.msg,{icon:1,time:1000},function () {
                            layer.close(top.layer_parkingLot);
                            reloadPage();
                        });
                    }else{
                        layer.msg(data.msg,{icon: 2,time:1000});
                    }
                },
                error: function () {
                    alert("保存未成功")
                }
            })
        }
    }


    /**
     * 清空表单
     */
    function clearAll() {
        var t = document.getElementsByTagName("input"); //清空所有的文本框
        for (var i = 0; i < t.length; i++) {
            if (t[i].type == 'text') {
                t[i].value = "";//清空
            }
        }
        var t = document.getElementsByTagName("textarea"); //清空所有的文本域
        for (var i = 0; i < t.length; i++) {
            t[i].value = "";//清空
        }
    }

    function openLay(id,title,url,width,height) {
        $.ajax({
            type:'get',
            dataType:'html',
            url:url,
            success:function (data) {
                top[id] = layer.open({
                    type: 1,
                    title: title,
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : [width,height],
                    content: data
                });
            },
            error:function (data) {
                alert("没有找到此页面");
            }
        });
    }


    function selectParklot() {
        var src = document.getElementById("tu").value;
        console.log("选择车位图片："+src);

        openLay("layer_parkinglot_open","选择车位位置","/car/parkinglot/selectParklot?src="+src,'850px','650px');
    }


</script>
